<template>
	<view class="xbd-project-card">
		<view class="left">
			<view>{{myinfo.name}}</view>
		</view>
		<view class="middle">
			<view class="">
				<image v-if="myinfo.last_state=='successed'||myinfo.last_state=='refused'|| myinfo.last_state=='break'" class="garden" src="@/static/image/garden3.png"></image>
				<image v-else-if=" myinfo.last_state=='again' || myinfo.last_state=='wait'" class="garden"
					src="@/static/image/garden1.png"></image>
				<image v-else-if=" myinfo.last_state==''" class="garden" src="@/static/image/garden2.png"></image>
			</view>
			<view v-if="length !== (inx+1)" class="line"></view>
		</view>
		<view class="right">
			<view style="margin-bottom: 20rpx;" v-for="(item,index) in myinfo.flow" :key="index">
				<view v-if="!(index > 0 && item.state=='') || item.audit" class="name" >
					{{myinfo.user_name}}
					<view class="state" v-if="item.state==='successed'">
						已同意
					</view>
					<view class="state" style="background-color:#FC4F4F" v-if="item.state==='break'">
						已退回
					</view>
					<view class="state " style="background-color:#8890A5" v-if="item.state==='refused'">
						已终止
					</view>
				</view>
				<view v-if="item.state !==''">
					<view class="time">
						{{item.audit_time | timeFormat('YYYY-MM-DD HH:mm')}}
					</view>

					<view class="tag">
						审批附件
					</view>
					<view v-if="item.data.data_url.length !==0">
						<view class='attachment' v-if="showImg(item.data.data_url).length !== 0">
							<image v-for="(items,index) in showImg(item.data.data_url)" :key='index' class="image"
								:src="showImg(item.data.data_url)[index]" @click="image_click(items)"></image>
						</view>
						<view v-else class='text'>
							文件请在PC端查看
						</view>
					</view>
					<view v-else>
						-
					</view>
					<view >
						<view class="tag">
							审批意见
						</view>
						<view v-if="item.view.length !==0" class='text'>
							{{item.view}}
						</view>
						<view v-else>
							-
						</view>
					</view>
				</view>

				<view v-if=" ((myinfo.last_state=='again'&& myinfo.flow.length-1==index) || (myinfo.last_state=='wait' && myinfo.flow.length-1==index))&& item.audit ">
					<view class="tag">
						审批附件
					</view>
					<!-- 上传图片 -->
					<view class="image">
						<view class="box-image" v-for="(item,index) in upImg" :key="index">
							<image class="del" src="@/static/image/del.png" @click="del(item)"></image>
							<image class="images" :src='upImg[index]' @click="image_click(item)"></image>
						</view>
						<view v-if="upImg.length !== 6" class="upload" @click="choose_image">
							<image src="@/static/image/supervision/upload.png" mode=""></image>
							<view class="">
								上传图片
							</view>
						</view>
					</view>
					<view class="tag">
						审批意见
					</view>
					<textarea class="textarea" placeholder="请输入内容..." v-model="value" maxlength="-1"
						auto-height></textarea>

					<view class="floot" v-if="item.audit">
						<view v-if="inx!==0" class="btn back" @click="unqualified(index)">
							终止
						</view>
						<view v-if="inx!==0" class="btn refused" @click="goBack(index)">
							退回
						</view>
						<view class="btn pass" @click="pass(index)">
							同意
						</view>
					</view>
				</view>
			</view>


		</view>
		<xbd-popup :isShow="showDialog" @dialogConfirm='dialogConfirm' @dialogCancel='dialogCancel'
			:content="titleText"></xbd-popup>
	</view>
	</view>
</template>

<script>
	import {
		Supervision
	} from '@/api/index.js';
	export default {
		name: 'XbdProjectCard',
		props: {
			myinfo: '',
			farId: '',
			type: '',
			names: '',
			inx: '',
			length:''
		},
		data() {
			return {
				// 判断是否已读
				titleText: '',
				showDialog: false,
				flag: true,
				value: "",
				upImg: [],
				val: '',
				data_image: [],

			}
		},
		computed: {

		},
		methods: {
			// 筛选数组中的图片
			showImg(arr) {
				console.log(arr,'arr')
				let a = []
				if(arr.length!==0){
					for (let i = 0; i < arr.length; i++) {
						if (arr[i].indexOf(".png") !== -1 || arr[i].indexOf(".jpg") !== -1 || arr[i].indexOf(".jpeg") !== -1) {
							a.push(arr[i])
						}
					}
				}
				
				return a
			},
			dialogConfirm() {
				//弹出框确认操作
				
				const o = {
					id: this.farId,
					first_index: this.inx,
					second_index: this.val,
					type: 'successed',
					view: this.value,
					data: {
						data_url: [...this.upImg],
						data_name: [...this.data_image]
					}
				}
				if (this.flag) {

					if (this.titleText == "确定处置结果为同意？") {
						o.type = 'successed'
					} else if (this.titleText == "确定处置结果为终止？") {
						o.type = 'refused'
					} else {
						o.type = 'break'
					}
					this.flag= false
					this.Report(o)
				}
				this.showDialog = false;
				// this.cancell()
			},
			dialogCancel() {
				console.log("取消")
				this.showDialog = false;
			},
			image_click(img) {
				// 点击预览图片
				dd.previewImage({
					current: 1,
					urls: [img],
				});
				console.log(img, 'img')
			},
			choose_image() {
				uni.chooseImage({
					count: 6 - this.upImg.length,
					success: (chooseImageRes) => {

						const tempFilePaths = chooseImageRes.tempFilePaths;
						// console.log(chooseImageRes, 'chooseImageRes.tempFilePaths;')
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: 'http://113.135.192.25:18398/api/upload', //仅为示例，非真实的接口地址  后期接口变更需调整
								header: {
									'Content-Type': 'multipart/form-data',
									'Authorization': uni.getStorageSync("token")
								},
								filePath: tempFilePaths[i],
								fileType: 'image',
								name: 'file',
								success: (uploadFileRes) => {
									if( this.upImg.indexOf(JSON.parse(uploadFileRes.data).data.url) == -1 && (JSON.parse(uploadFileRes.data).data.url.indexOf('.jpg') !== -1 || JSON.parse(uploadFileRes.data).data.url.indexOf('.png')!== -1 || JSON.parse(uploadFileRes.data).data.url.indexOf('.jpeg')!== -1)){
										this.upImg.push(JSON.parse(uploadFileRes.data).data.url)
									const a = JSON.parse(uploadFileRes.data).data.url.substring(
										JSON.parse(uploadFileRes.data).data.url.lastIndexOf(
											"upload") + 7, JSON.parse(uploadFileRes.data).data
										.url.length)
									this.data_image.push(a)
									}
								}
							});
						}

					}
				});
				// console.log(this.upImg)
			},
			del(val) {
				console.log(val)
				this.upImg = this.upImg.filter(item => {
					return item !== val
				})
			},
			unqualified(val) {
				this.val = val
				this.showDialog = true
				this.titleText = '确定处置结果为终止？'
			},

			pass(val) {
				this.titleText = '确定处置结果为同意？'
				this.val = val
				this.showDialog = true
			},
			goBack(val) {
				this.titleText = '确定处置结果为退回？'
				this.val = val
				this.showDialog = true
			},
			async Report(o) {

				console.log(o, 'o')
				const res = await Supervision.postCaseAudit(o)
				if (res.success) {
					this.upImg=[]
					this.data_image=[]
					this.value=''
					this.flag = true
					uni.$emit('upLoad')
				} else {
					this.flag = true
				}
				console.log(res)
				this.$showToast(res.msg);
			},


		}
	}
</script>

<style lang="scss" scoped>
	.xbd-project-card {
		display: flex;

		.left {
			font-size: 28rpx;
			color: #000623;
			width: 120rpx;
			margin-right: 30rpx;
		}

		.middle {
			display: flex;
			flex-direction: column;

			.garden {
				height: 24rpx;
				width: 24rpx;
			}

			.line {
				flex: 1;
				margin-left: 11rpx;
				border-left: 2rpx dashed #e5e5e5;
			}
		}

		.right {
			margin-left: 30rpx;
			margin-bottom: 80rpx;
			flex: 1;
			
			.tag {
				font-size: 26rpx;
				color: #8890A5;
				margin-bottom: 16rpx;
			}

			.text {
				font-size: 30rpx;
				color: #000623;
				white-space: pre-line !important;
				word-break: break-all !important;
				word-wrap: break-word ;
				
			}

			.opinion {
				font-size: 30rpx;
				color: #000623;
				font-weight: 400;
			}

			.name {
				display: flex;
				font-size: 30rpx;
				font-weight: 700;
				margin-bottom: 10rpx;

				.state {
					padding: 3rpx 6rpx;
					font-size: 22rpx;
					color: #FFFFFF;
					margin-left: 20rpx;
					background-color: #48BC7C;
					border-radius: 4rpx;
				}

				.color {
					background-color: #FC4F4F !important;
				}
			}

			.attachment {
				display: flex;
				flex-wrap: wrap;

				.image {
					width: 124rpx;
					height: 124rpx;
					margin: 10rpx 20rpx 10rpx 0;

					&:nth-child(3n) {
						margin-right: 0rpx;
					}
				}
			}


			.image {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 20rpx;

				.box-image {
					position: relative;
				}

				.del {
					width: 38rpx;
					height: 38rpx;
					position: absolute;
					top: -16rpx;
					right: 4rpx;
				}

				.images {
					margin-right: 20rpx;
					width: 140rpx;
					height: 140rpx;

					&:nth-child(3n) {
						margin-right: 0;
					}
				}

				.upload {

					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					font-size: 20rpx;
					color: #A0A7B8;
					width: 140rpx;
					height: 140rpx;
					border: 2rpx dashed #d0d6e5;
					border-radius: 8rpx;
					line-height: normal;

					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 0;
						margin-bottom: 10rpx;
					}
				}
			}

			.textarea {
				box-sizing: border-box;
				min-height: 120rpx;
				padding: 20rpx 30rpx;
				font-size: 26rpx;
				border: 2rpx solid #EBEEF5;
				margin-bottom: 20rpx;
				border-radius: 8rpx;
			}

			.floot {
				margin-top: 60rpx;
				display: flex;
				justify-content: flex-end;

				.btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 120rpx;
					height: 60rpx;
					font-size: 32rpx;
					border-radius: 8rpx;
				}

				.back {
					border: 2rpx solid #FCB94F;
					color: #FCB94F;
					margin-right: 20rpx;
				}

				.refused {
					border: 2rpx solid #FC4F4F;
					color: #FC4F4F;
					margin-right: 20rpx;
				}

				.pass {
					background: linear-gradient(266deg, #2e73fc 3%, #1ea9fb 95%);
					color: #FFFFFF;
				}


			}
		}
	}
</style>
